<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { ApiOfJobPage } from '@neu/dcom-ui/api/jobs'

export default {
  name: 'JobManagement',
  components: {
    PageableTable
  },
  mixins: [databind],
  data() {
    return {
      r: ApiOfJobPage,
      insideColumns: [
        { title: '任务名称', key: 'jobName',
          render: (h, params) => { return (<span>{ params.row.jobDetail.jobName }</span>) }
        },
        { title: '任务组', key: 'jobGroup',
          render: (h, params) => { return (<span>{ params.row.jobDetail.jobGroup }</span>) }
        },
        { title: '任务描述', key: 'description', width: 300,
          render: (h, params) => { return (<span>{ params.row.jobDetail.description }</span>) }
        },
        { title: '开始时间', key: 'startTime', sortable: 'custom',
          render: (h, params) => { return (<span>{ formatDate(params.row.startTime) }</span>) }
        },
        { title: '上次触发时间', key: 'previousFireTime', sortable: 'custom',
          render: (h, params) => { return (<span>{ formatDate(params.row.previousFireTime) }</span>) }
        },
        { title: '下次触发时间', key: 'nextFireTime', sortable: 'custom',
          render: (h, params) => { return (<span>{ formatDate(params.row.nextFireTime) }</span>) }
        }
      ]
    }
  },
  methods: {
  }
}
</script>
